import { App } from 'vue'
import XtxSkeleton from './skeleton/index.vue'
import XtxCarousel from './carousel/index.vue'
import XtxMore from './more/index.vue'
import XtxBread from './bread/index.vue'
import XtxBreadItem from './bread/item.vue'
import XtxCity from './city/index.vue'
import Checkbox from './checkbox/index.vue'
import Numbox from './Numbox/index.vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  install(app: App){
    app.component(XtxSkeleton.name,XtxSkeleton)
    app.component(XtxCarousel.name,XtxCarousel)
    app.component(XtxMore.name,XtxMore)
    app.component(XtxBread.name,XtxBread)
    app.component(XtxBreadItem.name,XtxBreadItem)
    app.component(XtxCity.name,XtxCity)
    app.component(Checkbox.name,Checkbox)
    app.component(Numbox.name,Numbox)

    app.directive('lazy',{
      mounted(el,binding){
        // console.log(el,binding);
        useIntersectionObserver(el,([{ isIntersecting }]) => {
          if(isIntersecting){
            el.src = binding.value
          }
        })
      }
    })
  }
}